<template>
  <view class="template-details tn-safe-area-inset-bottom">
    <!-- 提示信息 -->
    <u-toast ref="uToast" />
    <!-- 加载动画 -->
    <u-loading-page :loading="loading" :iconSize="100" />
    <u-navbar title="动态详情" :border="true" :autoBack="true" />
    <view>
      <!-- 图文信息 -->
      <view class="blogger__item" v-if="dedail">
        <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
          <view class="justify__author__info">
            <view class="tn-flex tn-flex-row-center">
              <view class="tn-flex tn-flex-row-center tn-flex-col-center">
                <view>
                  <tn-avatar shape="circle" :src="dedail.avatar" size="lg"></tn-avatar>
                  <text :class="dedail.sex == 1 ? 'tn-icon-sex-male tn-color-blue' : 'tn-icon-sex-female tn-color-red'" style="position: absolute; margin-left: -12rpx; margin-top: -5rpx;"></text>
                </view>
                <view class="tn-padding-right tn-text-ellipsis">
                  <view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">{{ dedail.nickname }}</view>
                  <view class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray">{{ $u.timeFrom(dedail.createTime) }}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
            <text class="tn-bg-indigo--light tn-round tn-text-df tn-text-bold tn-color-indigo" style="padding: 10rpx 24rpx;">+ 关注</text>
          </view>
        </view>

        <view class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left">
          <view
            v-for="(tags_item, tags_index) in dedail.tags"
            :key="tags_index"
            class="blogger__desc__label tn-float-left tn-margin-right tn-round tn-text-sm"
            :class="tags_index == 1 ? 'tn-bg-red--light' : tags_index == 2 ? 'tn-bg-cyan--light' : 'tn-bg-blue--light'">
            <text>#</text>
            <text class="tn-text-df">{{ tags_item }}</text>
          </view>
          <!-- 不用限制长度了，因为发布的时候限制长度了-->
          <text v-if="!dedail.tags || dedail.tags.length < 4" class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">{{ dedail.content }}</text>
        </view>
        <block v-if="dedail.images">
          <view v-if="[1, 2, 4].indexOf(dedail.images.length) != -1" class="tn-padding-top-xs">
            <image v-for="(image_item, image_index) in dedail.images" :key="image_index" class="blogger__main-image"
              :class="{
                'blogger__main-image--1 tn-margin-bottom-sm': dedail.images.length === 1,
                'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': dedail.images.length === 2 || dedail.images.length === 4
              }"
              :src="image_item" mode="aspectFill" @click="previewImage(image_index)">
            </image>
          </view>
          <view v-else class="tn-padding-top-xs">
            <tn-grid hoverClass="none" :col="3">
              <block v-for="(image_item, image_index) in dedail.images" :key="image_index">
                <!-- #ifdef MP-WEIXIN -->
                <tn-grid-item style="width: 30%;margin: 10rpx;" @click="previewImage(image_index)">
                  <image class="blogger__main-image blogger__main-image--3" :src="image_item" mode="aspectFill"></image>
                </tn-grid-item>
                <!-- #endif-->
              </block>
            </tn-grid>
          </view>
        </block>

        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
          <view class="justify-content-item tn-flex tn-flex-col-center">
            <view style="margin-right: 10rpx;">
              <tn-avatar-group :lists="dedail.likesAvatar" size="sm"></tn-avatar-group>
            </view>
            <text class="tn-color-gray">{{ dedail.likes }}人点赞</text>
          </view>
          <view class="justify-content-item tn-color-gray tn-text-center">
            <view>
              <text class="blogger__count-icon tn-icon-eye"></text>
              <text class="tn-padding-right">{{ dedail.views }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 按钮-->
      <view class="tn-flex tn-flex-row-between" style="margin: 40rpx 0 60rpx 0;">
        <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
          <tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold @click="like">
            <text class="tn-icon-like-lack tn-padding-right-xs tn-color-black"></text>
            <text class="tn-color-black">点 赞</text>
          </tn-button>
        </view>
        <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
          <tn-button backgroundColor="#FFF00D" padding="40rpx 0" width="90%" shadow fontBold open-type="share">
            <text class="tn-icon-share-triangle tn-padding-right-xs tn-color-black"></text>
            <text class="tn-color-black">分 享</text>
          </tn-button>
        </view>
      </view>

    </view>

    <!-- 评论 -->
    <view class="tn-margin" style="padding-bottom: 120rpx;">
      <u-empty mode="comment" v-if="!commentLists.length" icon="http://cdn.uviewui.com/uview/empty/comment.png" />
      <view v-for="(item, index) in commentLists" :key="index">
        <view class="tn-flex tn-flex-row-between tn-flex-col-center">
          <view class="justify-content-item" @click="click(`/user/personal/index?id=${item.userId}`)">
            <view class="tn-flex tn-flex-col-center tn-flex-row-left">
              <view class="logo-pic tn-shadow">
                <view class="logo-image">
                  <view class="tn-shadow-blur" :style="{ 'background-image': `url(${item.avatar});` }" style="width: 60rpx;height: 60rpx;background-size: cover;"></view>
                </view>
              </view>
              <view class="tn-padding-right tn-padding-left-sm">
                <view class="tn-padding-right tn-text-df tn-text-bold tn-color-black">{{ item.nickname }}</view>
                <view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray" style="padding-top: 5rpx;">{{ $u.timeFrom(item.createTime) }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="tn-flex tn-flex-row-between" style="margin: 20rpx 30rpx 30rpx 80rpx;">
          <view style="width: 90%;">{{ item.content }}</view>
          <view class="tn-color-blue tn-text-sm" @click="showPopup(item)">回复</view>
        </view>
        <u-read-more showHeight="80" textIndent="0em" closeText="查看全部" :toggle="true">
          <view class="reply tn-text-sm" v-for="(_item, _index) in item.children" :key="_index">
            <view class="tn-bg-gray--light tn-padding-sm reply_content">
              <text class="tn-color-blue">{{ _item.nickname }}</text>回复
              <text class="tn-color-blue">{{ _item.toNickname }}</text>
              <view style="line-height: 40rpx;">{{ _item.content }}</view>
              <view class="tn-flex tn-flex-row-between tn-margin-top-xs">
                <view class="justify-content-item tn-text-xs tn-color-gray">
                  {{ $u.timeFrom(_item.createTime) }}
                </view>
              </view>
            </view>
            <view class="tn-color-blue" @click="showPopup(_item)">回复</view>
          </view>
        </u-read-more>
      </view>
    </view>

    <u-popup :show="replypopup" round="6" @close="replypopup = false">
      <view class="tn-flex tn-flex-row-between tn-padding-sm">
        <view class="tn-color-red"></view>
        <view class="tn-color-blue" @click="reply_btn">确认</view>
      </view>
      <view class="tn-padding-xs" :style="{'margin-bottom': keyHeight + 'px' }">
        <u--textarea v-model="commentText" :placeholder="placeholderText" :showConfirmBar="false" fixed count></u--textarea>
      </view>
		</u-popup>
    <view class="tabbar footerfixed dd-glass">
      <view class="tn-flex tn-flex-row-between tn-flex-col-center">
        <view class="justify-content-item tn-margin-top">
          <view class="tn-flex tn-flex-row-center tn-flex-col-center">
            <view class="topic__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="topic__info__item__input__left-icon">
                <view class="tn-icon-emoji-good"></view>
              </view>
              <view class="topic__info__item__input__content">
                <input v-model="commentText" maxlength="20" placeholder-class="input-placeholder" :cursor-spacing="18" placeholder="不说点啥子吗？" />
              </view>
            </view>
          </view>
        </view>
        <view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-margin-top tn-margin-right">
          <view class="topic__info__item__sure">
            <view class="tn-flex-1 justify-content-item tn-text-center">
              <tn-button shape="round" backgroundColor="tn-cool-bg-color-15--reverse" width="100%" blockRepeatClick shadow @click="comment">
                <text class="tn-color-white" hover-class="tn-hover" :hover-stay-time="150">
                  发 送
                </text>
              </tn-button>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { detail, like, comment, reply, commentList } from '@/api'
export default {
  name: 'Details',
  data() {
    return {
      keyHeight: 0,
      id: null,
      loading: true,
      replypopup: false,
      replyData: null,
      dedail: [],
      commentLists: [],
      commentText: '',
      placeholderText: '不说点啥子吗？',
    }
  },
  onLoad(e) {
    this.id = e.id;
    this.getDetail();
    this.commentList();
    uni.onKeyboardHeightChange(res => {
      const { height, duration } = res;
      this.keyHeight = height;
    })
  },
  methods: {
    // 获取详情
    async getDetail() {
      const { code, message, data } = await detail({ id: this.id });
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.dedail = data;
      this.loading = false;
    },

    // 评论列表
    async commentList() {
      const { code, message, data } = await commentList({ id: this.id });
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.commentLists = data;
    },

    // 评论
    async comment() {
      if (!this.isLogin) {
        return uni.navigateTo({
          url: '/pages/login/login',
        });
      }
      if (!this.commentText) {
        return this.$refs.uToast.show({
          type: 'error',
          message: '请输入评论内容'
        });
      }
      const { code, message, data } = await comment({ id: this.id, content: this.commentText });
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.$refs.uToast.show({
        type: 'success',
        message: message
      });
      this.commentText = '';
      this.commentList();
    },

    // 点赞
    async like() {
      if (!this.isLogin) {
        return uni.navigateTo({
          url: '/pages/login/login',
        });
      }
      const { code, message, data } = await like({ id: this.id });
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.$refs.uToast.show({
        type: 'success',
        message: message
      });
      this.dedail.likes = data.likes;
      this.dedail.likesAvatar = data.avatars;
    },

    // 回复评论
    async reply_btn() {
      const e = this.replyData;
      const { code, message, data } = await reply({ toUserId: e.userId, pid: e.pid ? e.pid : e.id, content: this.commentText });
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.commentText = '';
      this.commentList();
      this.replypopup = false;
      this.$refs.uToast.show({
        type: 'success',
        message: message
      });
    },

    showPopup(e) {
      if (!this.isLogin) {
        return uni.navigateTo({
          url: '/pages/login/login',
        });
      }
      this.placeholderText = `回复@${e.nickname}`;
      this.replypopup = true;
      this.replyData = e;
    },
	
    // 查看图片
    previewImage(e) {
      uni.previewImage({
        current: this.dedail.images[e],
        urls: this.dedail.images,
      });
    },
    // 跳转
    click(e) {
      if (!this.isLogin) {
        return uni.navigateTo({
          url: '/pages/login/login',
        });
      }
      uni.navigateTo({
        url: e,
      });
    },
    // 分享
    onShareAppMessage() {
      return {
        title: this.dedail.content,
        imageUrl: this.dedail.images[0],
      }
    },
  }
}
</script>

<style lang="scss" scoped>
/* 文章内容 start*/
.blogger {
  &__item {
    padding: 30rpx;
  }

  &__author {
    &__btn {
      margin-right: -12rpx;
      padding: 0 20rpx;
    }
  }

  &__desc {
    line-height: 40rpx;

    &__label {
      padding: 0 20rpx;
      margin: 0rpx 18rpx 0 0;

      &--prefix {
        color: #00FFC8;
        padding-right: 10rpx;
      }
    }
  }

  &__content {
    margin-top: 18rpx;
    padding-right: 18rpx;

    &__data {
      line-height: 46rpx;
      text-align: justify;
      overflow: hidden;
      transition: all 0.25s ease-in-out;

    }

    &__status {
      margin-top: 10rpx;
      font-size: 26rpx;
      color: #82B2FF;
    }
  }

  &__main-image {
    border-radius: 16rpx;

    &--1 {
      width: 100%;
      height: 400rpx;
    }

    &--2 {
      max-width: 325rpx;
      max-height: 325rpx;
    }

    &--3 {
      height: 212rpx;
      width: 100%;
    }
  }

  &__count-icon {
    font-size: 40rpx;
    padding-right: 5rpx;
  }

  &__ad {
    width: 100%;
    height: 500rpx;
    transform: translate3d(0px, 0px, 0px) !important;

    ::v-deep .uni-swiper-slide-frame {
      transform: translate3d(0px, 0px, 0px) !important;
    }

    .uni-swiper-slide-frame {
      transform: translate3d(0px, 0px, 0px) !important;
    }

    &__item {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-origin: left center;
      transform: translate3d(100%, 0px, 0px) scale(1) !important;
      transition: transform 0.25s ease-in-out;
      z-index: 1;

      &--0 {
        transform: translate3d(0%, 0px, 0px) scale(1) !important;
        z-index: 4;
      }

      &--1 {
        transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
        z-index: 3;
      }

      &--2 {
        transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
        z-index: 2;
      }
    }

    &__content {
      border-radius: 40rpx;
      width: 640rpx;
      height: 500rpx;
      overflow: hidden;
    }

    &__image {
      width: 100%;
      height: 100%;
    }
  }
}

/* 文章内容 end*/

/* 间隔线 start*/
.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}

/* 间隔线 end*/

/* 头像 start */
.logo-image {
  width: 60rpx;
  height: 60rpx;
  position: relative;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  overflow: hidden;
  // background-color: #FFFFFF;
}


/* 底部 start*/
.footerfixed {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}

.tabbar {
  align-items: center;
  min-height: 130rpx;
  padding: 0;
  height: calc(130rpx + env(safe-area-inset-bottom) / 2);
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom) / 2);
  padding-left: 10rpx;
  padding-right: 10rpx;
}

/* 毛玻璃*/
.dd-glass {
  width: 100%;
  backdrop-filter: blur(20rpx);
  -webkit-backdrop-filter: blur(20rpx);
}

/* 头像*/
.avatar-all {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
}

/* 内容*/
.topic {
  position: relative;
  height: 100%;
  z-index: 1;
  margin-bottom: 120rpx;


  /* 表单信息 start */
  &__info {
    margin: 0 50rpx;
    margin-top: 105rpx;
    padding: 30rpx 51rpx;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 1);
    border: 2rpx solid rgba(255, 255, 255, 0.1);
    box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

    &__item {

      &__input {
        width: 72vw;
        height: 60rpx;
        border: 1rpx solid #C6D1D8;
        border-radius: 39rpx;

        &__left-icon {
          width: 10%;
          font-size: 44rpx;
          margin-left: 20rpx;
          margin-right: 5rpx;
          color: #C6D1D8;
        }

        &__content {
          width: 80%;
          padding-left: 10rpx;

          &--verify-code {
            width: 56%;
          }

          input {
            font-size: 30rpx;
            color: #78909C;
            // letter-spacing: 0.1em;
          }
        }

        &__right-icon {
          width: 10%;
          font-size: 34rpx;
          margin-right: 20rpx;
          color: #78909C;
        }

        &__right-verify-code {
          width: 34%;
          margin-right: 20rpx;
        }
      }

      &__button {
        width: 100%;
        height: 60rpx;
        text-align: center;
        font-size: 31rpx;
        font-weight: bold;
        line-height: 77rpx;
        // text-indent: 1em;
        border-radius: 100rpx;
        color: #FFFFFF;
        background-color: rgba(255, 255, 255, 0.2);
        // border: 2rpx solid #FFFFFF;
      }

      &__sure {
        height: 60rpx;
        width: 140rpx;
      }

    }
  }

  /* 表单信息 end */

  /* 内容 end */

}

.input-placeholder {
  font-size: 30rpx;
  color: #C6D1D8;
}

.reply {
  display: flex;
  justify-content: space-between;
  align-items: center;

  &_content {
    border-radius: 10rpx;
    margin: 10rpx 10rpx 10rpx 80rpx;
    width: 80%;
  }
}
</style>
